<template>
	<view class="slide-container">
		<view class="item" v-for="(item,index) in list" :key="index" @tap="clickSlide(index)">
			<view class="img">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="name" :class="active === index ? 'name-checked' : ''">
				{{ item.name }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			active: 0,
			list: [
				{
					img: '../../static/langwen/item.png',
					name: '三级分类名称'
				},
				{
					img: '../../static/langwen/item.png',
					name: '三级分类名称'
				},
				{
					img: '../../static/langwen/item.png',
					name: '三级分类名称'
				},
				{
					img: '../../static/langwen/item.png',
					name: '三级分类名称'
				},
				{
					img: '../../static/langwen/item.png',
					name: '三级分类名称'
				},
				{
					img: '../../static/langwen/item.png',
					name: '三级分类名称'
				},
				{
					img: '../../static/langwen/item.png',
					name: '三级分类名称'
				},
				{
					img: '../../static/langwen/item.png',
					name: '三级分类名称'
				}
			]
		}
	},
	methods: {
		clickSlide(index) {
			this.active = index;
		}
	}
}
</script>

<style lang="less">
.slide-container {
	display: flex;
	align-items: center;
	height: 200rpx;
	overflow-x: auto;
	background:rgba(255,255,255,1);
	padding-left: 30rpx;
	.item {
		padding-right: 30rpx;
		.img {
			width: 72rpx;
			height: 96rpx;
			margin: 0 auto 14rpx auto;
		}
		.name {
			font-size: 22rpx;
			font-weight:400;
			color:rgba(191,191,191,1);
			white-space: nowrap;
		}
		.name-checked {
			font-size:22rpx;
			font-weight:400;
			color:rgba(90,194,255,1);
		}
	}
}
</style>
